<template>
	<view class="set_up">
		<view class="set_up_li head_portrait top_radius" @click="changeImage">
			<view class="u_li_left">头像</view>
			<view class="u_li_right">
				<image class="logo" :src="customer.avatar" mode="aspectFill"></image>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="set_up_li" @click="changeName(customer.nickName)">
			<view class="u_li_left">昵称</view>
			<view class="u_li_right">
				<text>{{customer.nickName}}</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="set_up_li ">
			<view class="u_li_left">手机号码</view>
			<view class="u_li_right">
				<text>{{customer.phone}}</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>
		<navigator class="set_up_li" hover-class="none" url="/pages/my/set-up/my-address/my-address">
			<view class="u_li_left">我的地址</view>
			<view class="u_li_right" v-if="customer.addressType == 2">
				<text>已设置</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
			<view class="u_li_right" v-else>
				<text class="w_no">未设置</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</navigator>
		<view class="set_up_li button_radius unset-border" @click="setPassword">
			<view class="u_li_left">交易密码</view>
			<view class="u_li_right" v-if="customer.tradePasswordType == 2">
				<text>已设置</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
			<view class="u_li_right" v-else>
				<text class="w_no">未设置</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="set_up_li top_radius authentication" @click="realName">
			<view class="u_li_left">实名认证</view>
			<view class="u_li_right" v-if="customer.isRealName">
				<text>已实名</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
			<view class="u_li_right" v-else>
				<text class="w_no">未认证</text>
				<image class="right_arrow" src="/static/my/right_arrow.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 输入框示例 -->
		<!-- <uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" :value="nameValue"
				placeholder="请输入修改昵称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup> -->
		<uni-popup ref="inputDialog" type="center">
			<view class="prop_box">
				<view class="prop_box_input">
					<input :focus="focus" v-model="nameValue" placeholder="请输入" />
				</view>
				<view class="prop_box_b">
					<view class="prop_box_b_txt" @click="propClose">取消</view>
					<view class="prop_box_b_txt prop_box_b_txt2" @click="dialogInputConfirm(nameValue)">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头像裁剪 -->
		<view class="log_out" @click="logOut">
			退出登录
		</view>
		<ksp-cropper mode="fixed" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024" :url="url"
			@cancel="oncancel" @ok="onok"></ksp-cropper>
	</view>
</template>

<script>
	import Uploads from '@/utils/upload.js'
	export default {
		data() {
			return {
				customer: {},
				url: '',
				nameValue: '',
				focus:true,
			}
		},
		onShow() {
			this.getCustomer()
		},
		methods: {
			realName() {
				uni.navigateTo({
					url: '/pages/my/certification/certification?isRealName=' + this.customer.isRealName
				})
			},
			// 设置交易密码
			setPassword(){
				if(this.customer.tradePasswordType == 1){
					uni.navigateTo({
						url:'./transaction-password/password-settings/password-settings?step=1'
					})
				}else{
					uni.navigateTo({
						url:'./transaction-password/transaction-password?phone='+this.customer.smsPhone
					})
				}
			},
			// 获取用户信息
			getCustomer() {
				this.$api.getCustomer().then(res => {
					this.customer = res.data
					if (this.customer.avatar == '') {
						this.customer.avatar = '/static/other/logo.png'
					}
				})
			},
			logOut() {
				// this.$queue.logout()
				uni.removeStorageSync("token")
				uni.removeStorageSync("isRealName")
				this.$queue.showToast('退出成功')
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
			propClose() {
				this.$refs.inputDialog.close()
			},
			changeName(name) {
				this.nameValue = name
				this.$refs.inputDialog.open()
			},
			changeImage() {
				// this.$refs.cropper.fSelect()
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.url = rst.tempFilePaths[0];
					}
				});
			},
			async onok(ev) {
				// var data = {
				// 	avatar:ev.path
				// }
				this.url = "";
				uni.showLoading({
					title: '请求中',
					mask: true
				})
				try {
					var img = await Uploads.uploadFile(ev.path)
					var res = await this.$api.putSetAvatar(img.data)
					this.$queue.showToast('修改成功！');
					this.url = "";
					this.customer.avatar = ev.path;
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				}

			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			async dialogInputConfirm(val) {
				if (val == '') {
					this.$queue.showToast('修改昵称不能为空！');
					return;
				}
				// var data = {
				// 	nickName:val
				// }
				uni.showLoading({
					title: '请求中',
					mask: true
				})
				try {
					var res = await this.$api.putSetNickName(val)
					this.$queue.showToast('修改成功！');
					this.customer.nickName = val
					this.$refs.inputDialog.close()
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style scoped>
	page {
		background: #F8FBFF;
	}

	.top_radius {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.button_radius {
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}

	.set_up {
		padding-top: 40rpx;
	}

	.set_up_li {
		width: 686rpx;
		margin: 0 auto;
		background: #fff;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;
		color: #000000;
	}

	.set_up_li .u_li_left {
		font-size: 30rpx;
		font-weight: 600;
	}

	.u_li_right {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
	}

	.u_li_right .logo {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
	}

	.u_li_right .right_arrow {
		width: 20rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}

	.head_portrait {
		padding: 46rpx 24rpx;
	}

	/* 认证 */
	.authentication {
		margin-top: 20rpx;
	}

	.u_li_right .w_no {
		color: #999999;
	}

	.unset-border {
		border-bottom: unset;
	}

	.log_out {
		margin: 0 auto;
		margin-top: 300rpx;
		width: 686rpx;
		height: 100rpx;
		background: #EDEDED;
		border-radius: 16rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
	}

	.prop_box {
		width: 560rpx;
		height: 320rpx;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
	}

	.prop_box_b {
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
		border-top: 2rpx solid #EEEEEE;
	}

	.prop_box_b_txt {
		width: 50%;
		height: 104rpx;
		color: #444444;
		font-size: 36rpx;
		text-align: center;
		line-height: 104rpx;
	}

	.prop_box_b_txt2 {
		color: #0B87F2;
		border-left: 2rpx solid #EEEEEE;
	}

	.prop_box_input {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 80rpx;
	}

	.prop_box_input input {
		width: 440rpx;
		height: 80rpx;
		border: 2rpx solid #EEEEEE;
		border-radius: 16rpx;
		padding: 0 20rpx;
	}
</style>
